<template>
	<view class="page-top-bg"></view>
	<AdaptiveNavBar :showBack="true" :showHome="false" :showShadow="false" text-color="#333333"
		background-color="#39b54a" />
	<view class="content-area" :style="{ marginTop: navbarTotalHeightRpx }" style="padding-top: 20rpx;">
		<view class="registration-container">
			<view class="main-content">
				<!-- 已选班期信息 -->
				<section class="section">
					<view class="section-header">
						<view class="section-header__left">
							<FontIcon name="icon-xuanzebanqi" class="section-header__icon section-header__font_icon">
							</FontIcon>
							<view class="section-header__title">已选班期</view>
						</view>
						<view class="schedule-date">{{ formattedDate }}</view>
					</view>
					<view class="status-row">
						<text class="status-label">班期状态</text>
						<view class="status-badge" :style="getStatusStyle()">{{ getStatusText() }}</view>
					</view>
				</section>

				<!-- ========== B1商家独有 ========== -->
				<!-- B1：组织联系人（组团视图：productType=1/3） -->
				<section class="section"
					v-if="isGroupProductType && detailData.contactList && detailData.contactList.length > 0">
					<view class="section-header">
						<FontIcon name="icon-lianxiren" class="section-header__icon section-header__font_icon">
						</FontIcon>
						<text class="section-header__title">组织联系人</text>
					</view>
					<view class="contact-card">
						<view class="contact-row" v-for="(contact, index) in detailData.contactList" :key="index">
							<view class="group-badge" v-if="contact.category">{{ contact.category }}</view>
							<view class="agency-info">
								<text class="agency-name">{{ contact.name || '未知' }}</text>
							</view>
							<text class="phone-number">{{ formatPhone(contact.phone) }}</text>
							<text class="phone-icon" @click="makeCall(contact.phone)">📞</text>
						</view>
					</view>
				</section>

				<!-- B1：客源城市（组团视图） -->
				<section class="section" v-if="isGroupProductType && detailData.saleArea">
					<view class="section-header">
						<FontIcon name="icon-lianxiren" class="section-header__icon section-header__font_icon">
						</FontIcon>
						<text class="section-header__title">客源信息</text>
					</view>
					<view class="info-item">
						<text class="info-label">客源城市</text>
						<text class="info-value">{{ detailData.saleArea }}</text>
					</view>
				</section>

				<!-- B1：容客详情（组团视图的名额设置） -->
				<section class="section" v-if="isGroupProductType">
					<view class="section-header">
						<FontIcon name="icon-lianxiren" class="section-header__icon section-header__font_icon">
						</FontIcon>
						<text class="section-header__title">容客详情</text>
					</view>
					<view class="info-item">
						<text class="info-label">每团满员名额上限</text>
						<text class="info-value">{{ detailData.fullNumberOfPeople || '--' }} 人</text>
					</view>
					<view class="info-item">
						<text class="info-label">每团最低成团人数</text>
						<text class="info-value">{{ detailData.leastNumberOfPeople || '--' }} 人</text>
					</view>
					<view class="info-item">
						<text class="info-label">每班服务最大承载团数</text>
						<text class="info-value">{{ detailData.fullNumberOfRegiment || '--' }} 团</text>
					</view>
				</section>

				<!-- B1/B2：成团确认日期（组团/小组通用） -->
				<section class="section" v-if="isGroupProductType || isTeamProductType">
					<view class="section-header">
						<FontIcon name="icon-rili" class="section-header__icon section-header__font_icon">
						</FontIcon>
						<text class="section-header__title">成团确认日期</text>
					</view>
					<view class="info-item">
						<text class="info-label">行程日期</text>
						<text class="info-value">{{ getTripDateText() }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">预计时间</text>
						<text class="info-value">{{ detailData.expectedTime || '--' }}</text>
					</view>
				</section>

				<!-- ========== B2商家独有 ========== -->
				<!-- B2：成团确认人数（小组视图：productType=2/4） -->
				<section class="section" v-if="isTeamProductType">
					<view class="section-header">
						<FontIcon name="icon-rili" class="section-header__icon section-header__font_icon">
						</FontIcon>
						<text class="section-header__title">成团确认人数</text>
					</view>
					<view class="info-item">
						<text class="info-label">成团确认人数</text>
						<text class="info-value">{{ getTripDateText() }}</text>
					</view>
				</section>

				<!-- B2：随队人与工作人员（小组视图） -->
				<section class="section"
					v-if="isTeamProductType && detailData.teamMembers && detailData.teamMembers.length > 0">
					<view class="section-header">
						<FontIcon name="icon-lianxiren" class="section-header__icon section-header__font_icon">
						</FontIcon>
						<text class="section-header__title">随队人与工作人员</text>
					</view>
					<view class="contact-card">
						<view class="contact-row" v-for="(member, index) in detailData.teamMembers" :key="index">
							<view class="group-badge-team">随队</view>
							<view class="agency-info">
								<text class="agency-name">{{ member.name || '未知' }}</text>
							</view>
							<text class="phone-number">{{ formatPhone(member.phone) }}</text>
							<text class="phone-icon" @click="makeCall(member.phone)">📞</text>
						</view>
					</view>
				</section>

				<!-- B2：接送/集散地点（小组视图） -->
				<section class="section" v-if="isTeamProductType && detailData.gatherArea">
					<view class="section-header">
						<FontIcon name="icon-daohangbiaozhi" class="section-header__icon section-header__font_icon">
						</FontIcon>
						<text class="section-header__title">接送/集散地点</text>
					</view>
					<view class="location-item">
						<text class="location-value">{{ detailData.gatherArea }}</text>
						<text class="location-icon">📍</text>
					</view>
				</section>

				<!-- B2：已申请名额（小组视图） -->
				<section class="section" v-if="isTeamProductType">
					<view class="section-header">
						<FontIcon name="icon-lianxiren" class="section-header__icon section-header__font_icon">
						</FontIcon>
						<text class="section-header__title">已申请名额</text>
					</view>
					<view class="info-item">
						<text class="info-label">每组名额上限</text>
						<text class="info-value">{{ detailData.groupMaxPeople || '--' }} 人，共 {{ detailData.groupCount ||
							'--' }} 个小组</text>
					</view>
					<view class="info-item">
						<text class="info-label">每组名额下限</text>
						<text class="info-value">{{ detailData.groupMinPeople || '--' }} 人</text>
					</view>
				</section>

				<!-- ========== B3商家独有 ========== -->
				<!-- B3：成团确认人数 -->
				<section class="section" v-if="businessType === 3">
					<view class="section-header">
						<FontIcon name="icon-rili" class="section-header__icon section-header__font_icon">
						</FontIcon>
						<text class="section-header__title">成团确认人数</text>
					</view>
					<view class="info-item">
						<text class="info-label">成团确认人数</text>
						<text class="info-value">{{ getGroupConfirmationText() }}</text>
					</view>
				</section>

				<!-- B3：行程日期/时间段 -->
				<section class="section" v-if="businessType === 3">
					<view class="section-header">
						<FontIcon name="icon-rili" class="section-header__icon section-header__font_icon">
						</FontIcon>
						<text class="section-header__title">行程日期/时间段</text>
					</view>
					<view class="info-item">
						<text class="info-label">出发</text>
						<text class="info-value">{{ getDepartureTimeText() }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">返回</text>
						<text class="info-value">{{ getReturnTimeText() }}</text>
					</view>
				</section>

				<!-- B3：接送/集散地点 -->
				<section class="section" v-if="businessType === 3 && detailData.gatherArea">
					<view class="section-header">
						<FontIcon name="icon-daohangbiaozhi" class="section-header__icon section-header__font_icon">
						</FontIcon>
						<text class="section-header__title">接送/集散地点</text>
					</view>
					<view class="location-item">
						<text class="location-value">{{ detailData.gatherArea }}</text>
						<text class="location-icon">📍</text>
					</view>
				</section>

				<!-- B3：随队工作人员 -->
				<section class="section" v-if="businessType === 3">
					<view class="section-header">
						<FontIcon name="icon-lianxiren" class="section-header__icon section-header__font_icon">
						</FontIcon>
						<text class="section-header__title">随队工作人员</text>
					</view>
					<view class="staff-list">
						<view class="staff-item" v-for="(member, index) in detailData.teamMembers" :key="index">
							<view class="group-badge-team">随队</view>
							<view class="staff-info">
								<text class="staff-name">{{ member.name }}</text>
								<text class="staff-phone">{{ formatPhone(member.phone) }}</text>
							</view>
							<view class="staff-action">
								<text class="delete-btn" @click="deleteStaff(index)">删除</text>
							</view>
						</view>
						<view class="add-staff-btn" @click="addStaff">
							<text
								class="add-staff-text">备注：您需添加一名随队工作人员，负责审核名单且审核上线；只调配会选相关内容管理。对所负责上述管理工作的进一步控管权限，取决于系统管理授权给管控主要审核监督工作管理</text>
							<text class="add-btn-icon">+ 添加</text>
						</view>
					</view>
				</section>

				<!-- B3：已申请名额 -->
				<section class="section" v-if="businessType === 3">
					<view class="section-header">
						<FontIcon name="icon-lianxiren" class="section-header__icon section-header__font_icon">
						</FontIcon>
						<text class="section-header__title">已申请名额</text>
					</view>
					<view class="info-item">
						<text class="info-label">每组名额上限</text>
						<text class="info-value">{{ detailData.groupMaxPeople || '--' }} 人，共 {{ detailData.groupCount ||
							'--' }} 个小组</text>
					</view>
					<view class="info-item">
						<text class="info-label">每组名额下限</text>
						<text class="info-value">{{ detailData.groupMinPeople || '--' }} 人</text>
					</view>
					<view class="info-desc">
						<text class="desc-text">您不输入自动填充限制人数可接收上线数额记录就行管理系统自己运行</text>
					</view>
				</section>

				<!-- B3：已报名信息（表格） -->
				<section class="section"
					v-if="businessType === 3 && detailData.campersList && detailData.campersList.length > 0">
					<view class="section-header">
						<FontIcon name="icon-yibaoming" class="section-header__icon section-header__font_icon">
						</FontIcon>
						<text class="section-header__title">已报名信息</text>
					</view>
					<view class="registration-table">
						<view class="table-header">
							<text class="table-cell" style="flex: 0.8;">序号</text>
							<text class="table-cell" style="flex: 1.5;">姓名</text>
							<text class="table-cell" style="flex: 1;">类别</text>
							<text class="table-cell" style="flex: 2.5;">证件号</text>
							<text class="table-cell" style="flex: 1;">操作</text>
						</view>
						<view class="table-body">
							<view class="table-row" v-for="(camper, index) in detailData.campersList" :key="index">
								<text class="table-cell" style="flex: 0.8;">{{ index + 1 }}</text>
								<text class="table-cell" style="flex: 1.5;">{{ camper.name || '--' }}</text>
								<text class="table-cell" style="flex: 1;">{{ getCategoryText(camper.category) }}</text>
								<text class="table-cell" style="flex: 2.5;">{{ formatIdCard(camper.idCard) }}</text>
								<text class="table-cell action" style="flex: 1;"
									@click="editRegistration(camper)">></text>
							</view>
						</view>
					</view>
				</section>

				<!-- ========== 共用 ========== -->
				<!-- 已报名信息（统计） 组团(productType=1/3) 和 小组(productType=2/4) 显示 -->
				<section class="section" v-if="isGroupProductType || isTeamProductType">
					<view class="section-header">
						<FontIcon name="icon-yibaoming" class="section-header__icon section-header__font_icon">
						</FontIcon>
						<text class="section-header__title">已报名信息</text>
					</view>

					<view class="info-cards">
						<view class="info-card">
							<text class="info-number">{{ detailData.groupCount || 0 }}</text>
							<text class="info-label">{{ groupLabel }}</text>
						</view>
						<view class="info-card">
							<text class="info-number">{{ detailData.staffCount || 0 }}</text>
							<text class="info-label">{{ staffLabel }}</text>
						</view>
						<view class="info-card">
							<text class="info-number">{{ detailData.campersCount || 0 }}</text>
							<text class="info-label">儿童数</text>
						</view>
						<view class="info-card">
							<text class="info-number">{{ detailData.totalCount || 0 }}</text>
							<text class="info-label">全员人数</text>
						</view>
					</view>
				</section>

				<!-- 合作概要 -->
				<section class="section">
					<view class="section-header">
						<FontIcon name="icon-shichangqudaoshezhi"
							class="section-header__icon section-header__font_icon">
						</FontIcon>
						<text class="section-header__title">合作概要</text>
					</view>

					<view class="summary-card">
						<view class="summary-item">
							<text class="summary-label">协议签署</text>
							<text class="summary-value link" @click="viewAgreement">婚内研学接待协议</text>
						</view>
						<view class="summary-item" v-if="detailData.applicationTime">
							<text class="summary-label">申请时间</text>
							<text class="summary-value">{{ formatDateTime(detailData.applicationTime) }}</text>
						</view>
						<view class="summary-item" v-if="detailData.applicantName">
							<text class="summary-label">申请人</text>
							<text class="summary-value">{{ detailData.applicantName }}（{{ getMerchantTypeText()
							}}的申请人）</text>
						</view>
						<view class="summary-item" v-if="detailData.responseTime">
							<text class="summary-label">批复时间</text>
							<text class="summary-value">{{ formatDateTime(detailData.responseTime) }}</text>
						</view>
						<view class="summary-item" v-if="detailData.responderName">
							<text class="summary-label">批复人</text>
							<text class="summary-value">{{ detailData.responderName }}（{{ getMerchantTypeText(true)
							}}的批复人）</text>
						</view>
						<view class="summary-item">
							<text class="summary-label">班期状态</text>
							<view class="status-badge" :style="getStatusStyle()">{{ getStatusText() }}</view>
						</view>
					</view>
				</section>
			</view>
		</view>
	</view>
</template>

<script>
import { request } from '@/utils/request.js'
import AdaptiveNavBar from '@/components/AdaptiveNavBar.vue'

export default {
	components: {
		AdaptiveNavBar
	},
	computed: {
		// 产品类型：1/3 组团视图，2/4 小组视图
		isGroupProductType() {
			return this.productType === 1 || this.productType === 3
		},
		isTeamProductType() {
			return this.productType === 2 || this.productType === 4
		},
		// 导航栏总高度（rpx）
		navbarTotalHeightRpx() {
			if (this.$navbarUtil && this.$navbarUtil.getNavbarTotalHeightRpx) {
				return this.$navbarUtil.getNavbarTotalHeightRpx()
			}
			return '176rpx' // 默认 88px * 2 = 176rpx
		},
		// 团数/小组数标签
		groupLabel() {
			if (this.isGroupProductType) {
				return '组团团数'
			}
			if (this.isTeamProductType) {
				return '小组数'
			}
			return '组团团数'
		},
		// 工作人员/随队人员标签
		staffLabel() {
			if (this.isGroupProductType) {
				return '工作人员'
			}
			if (this.isTeamProductType) {
				return '随队人员'
			}
			return '工作人员'
		},
		// 格式化日期显示
		formattedDate() {
			if (!this.detailData.availableDate) return '未选择'
			const ad = this.detailData.availableDate
			if (!ad.yearDate || !ad.monthDate || !ad.dayDate) return '未选择'
			return `${ad.yearDate}年${ad.monthDate}月${ad.dayDate}日`
		}
	},
	data() {
		return {
			statusBarHeight: 0,
			periodId: null,
			businessType: 1, // 1-B1 2-B2 3-B3
			productType: 0,
			detailData: {}
		}
	},
	methods: {
		// 获取班期状态文本
		getStatusText() {
			const statusMap = {
				0: '待答复',
				1: '报名中',
				2: '待成团',
				3: '已成团',
				4: '已完成',
				5: '已拒绝'
			}
			return statusMap[this.detailData.status] || '未知'
		},

		// 获取班期状态样式
		getStatusStyle() {
			const status = this.detailData.status
			let borderColor = '#FF3B30'
			let color = '#FF3B30'

			if (status === 1) { // 报名中
				borderColor = '#FBBD08'
				color = '#FBBD08'
			} else if (status === 3) { // 已成团
				borderColor = '#39B54A'
				color = '#39B54A'
			}

			return {
				borderColor: borderColor,
				color: color
			}
		},

		// 格式化电话号码
		formatPhone(phone) {
			if (!phone) return '未知'
			// 将手机号中间部分替换为***
			if (phone.length === 11) {
				return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
			}
			return phone
		},

		// 格式化身份证号
		formatIdCard(idCard) {
			if (!idCard) return '--'
			// 将身份证号中间部分替换为***
			if (idCard.length === 18) {
				return idCard.replace(/(\d{4})\d{10}(\d{4})/, '$1**********$2')
			}
			return idCard
		},

		// 获取营员类别文本
		getCategoryText(category) {
			const categoryMap = {
				1: '儿童',
				2: '成人'
			}
			return categoryMap[category] || '儿童'
		},

		// 获取行程日期文本 (B1)
		getTripDateText() {
			if (!this.detailData.availableDate) return '--'
			const ad = this.detailData.availableDate
			if (!ad.yearDate || !ad.monthDate || !ad.dayDate || !ad.weekDate) return '--'
			return `${ad.yearDate}年${ad.monthDate}月${ad.dayDate}日 08:00 ~ 18:00`
		},

		// 获取成团确认文本 (B3)
		getGroupConfirmationText() {
			if (!this.detailData.availableDate) return '--'
			const ad = this.detailData.availableDate
			if (!ad.yearDate || !ad.monthDate || !ad.dayDate) return '--'
			return `${ad.yearDate}年${ad.monthDate}月${ad.dayDate}日 15:09:09`
		},

		// 获取出发时间文本 (B3)
		getDepartureTimeText() {
			if (!this.detailData.availableDate) return '--'
			const ad = this.detailData.availableDate
			if (!ad.yearDate || !ad.monthDate || !ad.dayDate || !ad.weekDate) return '--'
			return `${ad.yearDate}年${ad.monthDate}月${ad.dayDate}日（${ad.weekDate}） 07:20`
		},

		// 获取返回时间文本 (B3)
		getReturnTimeText() {
			if (!this.detailData.availableDate) return '--'
			const ad = this.detailData.availableDate
			if (!ad.yearDate || !ad.monthDate || !ad.dayDate) return '--'
			// 假设返回日期是第二天
			const year = parseInt(ad.yearDate)
			const month = parseInt(ad.monthDate)
			const day = parseInt(ad.dayDate) + 1
			return `${year}年${month}月${day}日（周日） 18:20`
		},

		// 格式化日期时间
		formatDateTime(dateTime) {
			if (!dateTime) return '--'
			const date = new Date(dateTime)
			const year = date.getFullYear()
			const month = String(date.getMonth() + 1).padStart(2, '0')
			const day = String(date.getDate()).padStart(2, '0')
			const hour = String(date.getHours()).padStart(2, '0')
			const minute = String(date.getMinutes()).padStart(2, '0')
			return `${year}年${month}月${day}日 ${hour}:${minute}`
		},

		// 获取商户类型文本
		getMerchantTypeText(isResponder = false) {
			if (isResponder) {
				return '接待地商家'
			}
			const typeMap = {
				1: '组团社商家',
				2: '教体社商家',
				3: '教授组单位商家'
			}
			return typeMap[this.businessType] || '商家'
		},

		makeCall(phone) {
			if (!phone) return
			uni.showModal({
				title: '拨打电话',
				content: `确定要拨打 ${phone} 吗？`,
				success: (res) => {
					if (res.confirm) {
						uni.makePhoneCall({
							phoneNumber: phone
						})
					}
				}
			})
		},

		viewAgreement() {
			console.log('查看协议')
			uni.showToast({ title: '查看婚内研学接待协议', icon: 'none' })
		},

		// 加载报名详情数据
		async loadRegistrationDetail() {
			try {
				if (!this.periodId) {
					uni.showToast({ title: '缺少班期ID', icon: 'none' })
					return
				}

				const companyInfo = uni.getStorageSync('companyInfo') || {}
				const merchantId = companyInfo.id || ''
				this.businessType = companyInfo.businessType || 1

				const res = await request({
					url: `/call-apply/registration-detail?periodId=${this.periodId}&merchantId=${merchantId}&businessType=${this.businessType}`,
					method: 'GET'
				})

				console.log('报名详情接口返回:', res)

				if (res && (res.code === 200 || res.code === 1) && res.data) {
					this.detailData = res.data || {}
					console.log('✅ 报名详情加载成功:', this.detailData)
				} else {
					console.error('加载报名详情失败:', res?.message)
					uni.showToast({ title: res?.message || '加载失败', icon: 'none' })
				}
			} catch (error) {
				console.error('加载报名详情失败:', error)
				uni.showToast({ title: '加载失败', icon: 'none' })
			}
		},

		// B3专用：删除随队工作人员
		deleteStaff(index) {
			uni.showModal({
				title: '删除工作人员',
				content: '确定要删除该工作人员吗？',
				success: (res) => {
					if (res.confirm) {
						this.detailData.teamMembers.splice(index, 1)
						uni.showToast({ title: '删除成功', icon: 'success' })
					}
				}
			})
		},

		// B3专用：添加随队工作人员
		addStaff() {
			uni.showToast({ title: '跳转到添加工作人员页面', icon: 'none' })
			// TODO: 可以跳转到编辑页面或打开弹层
		},

		// B3专用：编辑报名信息
		editRegistration(camper) {
			console.log('编辑营员信息:', camper)
			uni.showToast({ title: '查看营员详情', icon: 'none' })
			// TODO: 可以跳转到编辑页面或打开弹层
		}
	},
	onLoad(options) {
		// 获取状态栏高度
		const systemInfo = uni.getSystemInfoSync()
		this.statusBarHeight = systemInfo.statusBarHeight || 20

		// 获取传递的参数
		if (options.periodId) {
			this.periodId = options.periodId
		}
		if (options.productType) {
			this.productType = Number(options.productType)
		}

		// 加载报名详情数据
		this.loadRegistrationDetail()
	}
}
</script>

<style lang="scss" scoped>
// 全局变量定义
$primary-color: #39b54a; // 主题绿，贴近设计稿
$secondary-color: #82A0F7;
$danger-color: #FF3B30;
$warning-color: #FC642F;
$success-color: #4CAF50;
$gray-color: #8E8E93;
$light-gray: #F1F1F1;
$border-color: #EEEEEE;
$text-primary: #333333;
$text-secondary: #999999;
$text-light: #FFFFFF;
$radius-base: 12rpx;
$radius-large: 20rpx;
$shadow-sm: 0 2rpx 10rpx rgba(0, 0, 0, 0.08);
$shadow-md: 0rpx -4rpx 14rpx 0rpx rgba(241, 241, 241, 0.5);
$transition-base: all 0.3s ease;

.page-top-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 750rpx;
	height: 280rpx;
	background: #39b54a;
	box-shadow: 0rpx 4rpx 24rpx 0rpx rgba(216, 216, 216, 0.72);
	backdrop-filter: blur(0px);
	pointer-events: none; // 不拦截点击
}

.content-area {
	background: #eeeeee;
}

.registration-container {
	position: relative;
	min-height: 100vh;
}

.main-content {
	padding-bottom: 180rpx;
}

// 通用区块样式
.section {
	background: #ffffff;
	margin: 24rpx;
	border-radius: 20rpx;

	&-header {
		display: flex;
		align-items: center;
		padding: 28rpx;

		&__left {
			display: flex;
			align-items: center;
			flex: 1;
		}

		&__icon {
			width: 30rpx;
			height: 30rpx;
			margin-right: 20rpx;
			font-size: 28rpx;
			color: #787878;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #f2f2f2;
		}

		&__title {
			font-size: 28rpx;
			font-weight: 600;
			color: #333333;
		}

		&__font_icon {
			color: #000000;
		}
	}

	&-description {
		font-size: 24rpx;
		color: $text-secondary;
		padding: 0rpx 28rpx 20rpx;
		line-height: 1.5;
	}
}

.status-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0rpx 28rpx 28rpx;
}

.status-label {
	font-size: 28rpx;
	color: #999999;
}

.schedule-date {
	font-size: 28rpx;
	color: $primary-color;
	font-weight: 600;
	margin-right: 20rpx;
}

.contact-card {
	padding: 0rpx 28rpx 20rpx;
}

.contact-row {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
	padding: 0rpx 0rpx 20rpx;
	border-bottom: 1rpx dashed #eee;
}

.contact-row:last-child {
	margin-bottom: 0;
	border-bottom: none;
}

.group-badge {
	width: 120rpx;
	height: 56rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6rpx;
	background-color: #39B54A;
	color: #ffffff;
	border: 1rpx solid #39B54A;
	border-radius: 15rpx;
	font-size: 24rpx;
	text-align: center;
	box-sizing: border-box;
	margin-right: 15rpx;
}

.group-badge-team {
	width: 120rpx;
	height: 56rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6rpx;
	background-color: #FBBD08;
	color: #333;
	border: 1rpx solid #FBBD08;
	border-radius: 15rpx;
	font-size: 24rpx;
	text-align: center;
	box-sizing: border-box;
	margin-right: 15rpx;
}

.agency-info {
	display: flex;
	align-items: center;
	flex: 1;
}

.agency-name {
	font-size: 28rpx;
	color: #333333;
	font-weight: 600;
	margin-right: 8rpx;
}

.play-icon {
	font-size: 16rpx;
	color: #333333;
}

.rating {
	display: flex;
	align-items: center;
	margin-left: 16rpx;
}

.star-icon {
	font-size: 28rpx;
	color: #FFD700;
	margin-right: 6rpx;
}

.rating-value {
	font-size: 24rpx;
	color: #333333;
	font-weight: 600;
	line-height: 1;
}

.label {
	font-size: 28rpx;
	color: #999999;
	margin-right: 15rpx;
}

.value {
	font-size: 28rpx;
	color: #333333;
	flex: 1;
}

.label.phone-label {
	color: #000000;
	font-weight: 600;
}

.coordinator-badge {
	background-color: rgba(252, 100, 47, 0.1);
	color: #FC642F;
	border: 1rpx solid #FC642F;
	border-radius: 4rpx;
	padding: 4rpx 12rpx;
	font-size: 20rpx;
	font-weight: 600;
	margin-right: 16rpx;
}

.coordinator-name {
	font-size: 24rpx;
	color: #333333;
	margin-right: 8rpx;
}

.coordinator-title {
	font-size: 20rpx;
	color: #FC642F;
	margin-right: 16rpx;
	background-color: rgba(252, 100, 47, 0.1);
	border: 1rpx solid #FC642F;
	border-radius: 4rpx;
	padding: 4rpx 12rpx;
	font-weight: 600;
}

.phone-number {
	font-size: 24rpx;
	color: #333333;
	margin-right: 12rpx;
}

.phone-icon {
	font-size: 24rpx;
	color: $primary-color;
	cursor: pointer;
}

.date-card {
	padding: 0rpx 28rpx 20rpx;
}

.date-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12rpx;
	padding-bottom: 12rpx;
	border-bottom: 1rpx dashed #eee;
}

.date-label {
	font-size: 28rpx;
	color: #000000;
	font-weight: 500;
}

.date-value {
	font-size: 28rpx;
	color: #333333;
	font-weight: 600;
}

.date-detail {
	margin-top: 8rpx;
}

.date-text {
	font-size: 24rpx;
	color: $text-secondary;
}

.info-cards {
	display: flex;
	gap: 16rpx;
	padding: 0rpx 28rpx 20rpx;
}

.info-card {
	flex: 1;
	background: white;
	border: 2rpx solid $primary-color;
	border-radius: 12rpx;
	padding: 24rpx;
	text-align: center;
}

.info-number {
	display: block;
	font-size: 48rpx;
	color: $primary-color;
	font-weight: bold;
	margin-bottom: 8rpx;
}

.info-label {
	font-size: 24rpx;
	color: #333333;
}

.summary-card {
	padding: 0rpx 28rpx 20rpx;
}

.summary-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16rpx;
	padding-bottom: 16rpx;
	border-bottom: 1rpx dashed #eee;
}

.summary-item:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

.summary-label {
	font-size: 28rpx;
	color: $text-secondary;
}

.summary-value {
	font-size: 28rpx;
	color: #333333;
	font-weight: 600;
}

.summary-value.link {
	color: #0081ff;
	text-decoration: underline;
}

.status-badge {
	font-size: 20rpx;
	color: #FC642F;
	margin-right: 16rpx;
	background-color: rgba(252, 100, 47, 0.1);
	border: 1rpx solid #FC642F;
	border-radius: 4rpx;
	padding: 4rpx 12rpx;
	font-size: 20rpx;
	color: $danger-color;
	font-weight: 600;
}

// B1、B2、B3共用样式
.info-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16rpx 28rpx;
	border-bottom: 1rpx dashed #eee;

	&:last-child {
		border-bottom: none;
	}
}

.info-label {
	font-size: 28rpx;
	color: $text-secondary;
}

.info-value {
	font-size: 28rpx;
	color: #333333;
	font-weight: 600;
}

// 位置信息样式
.location-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16rpx 28rpx;
}

.location-value {
	font-size: 28rpx;
	color: #333333;
	flex: 1;
}

.location-icon {
	font-size: 28rpx;
	margin-left: 16rpx;
	color: #1cbbb4;
}

// B3工作人员列表
.staff-list {
	padding: 0rpx 28rpx 20rpx;
}

.staff-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16rpx;
	padding: 12rpx 0rpx;
	border-bottom: 1rpx dashed #eee;
}

.staff-info {
	display: flex;
	align-items: center;
	flex: 1;
	margin-left: 12rpx;
}

.staff-name {
	font-size: 28rpx;
	color: #333333;
	font-weight: 600;
	margin-right: 20rpx;
}

.staff-phone {
	font-size: 24rpx;
	color: #333333;
}

.staff-action {
	display: flex;
	gap: 12rpx;
	align-items: center;
}

.delete-btn {
	font-size: 24rpx;
	color: #ff4d4f;
	background: rgba(255, 77, 79, 0.1);
	padding: 8rpx 16rpx;
	border-radius: 4rpx;
}

.add-staff-btn {
	margin-top: 16rpx;
	padding: 16rpx;
	background: #f8f8f8;
	border-radius: 8rpx;
	display: flex;
	flex-direction: column;
	gap: 12rpx;
}

.add-staff-text {
	font-size: 24rpx;
	color: #999999;
	line-height: 1.6;
}

.add-btn-icon {
	font-size: 28rpx;
	color: #3FBDA3;
	text-align: center;
	font-weight: 600;
}

.info-desc {
	padding: 16rpx 28rpx;
}

.desc-text {
	font-size: 24rpx;
	color: #999999;
	line-height: 1.6;
}

// B3报名信息表格
.registration-table {
	padding: 0rpx 28rpx 20rpx;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.table-header {
	display: flex;
	background: #f2f2f2;
	border-radius: 8rpx 8rpx 0 0;
	padding: 12rpx 0rpx;
	border-bottom: 1rpx solid #eee;
}

.table-body {
	display: flex;
	flex-direction: column;
}

.table-row {
	display: flex;
	padding: 12rpx 0rpx;
	border-bottom: 1rpx dashed #eee;
	align-items: center;

	&:last-child {
		border-bottom: none;
	}
}

.table-cell {
	font-size: 24rpx;
	color: #333333;
	padding: 8rpx;
	text-align: center;

	&.action {
		color: #0081ff;
		text-decoration: underline;
		font-weight: 600;
	}
}
</style>
